<script setup>
import { computed, getCurrentInstance, ref } from "vue";
import { showSuccessToast } from "vant";

// 导入路由
import { useRoute } from "vue-router"
const route = useRoute()

// 导入pinia
import useStore from "@/store/index.js";
const { userInfo } = useStore()



const { proxy } = getCurrentInstance()
const loading = ref(false)
const onClickLeft = () => {
	proxy.$router.back()
}

const params = ref({
	username: "",
	password: ""
})

const pattern = /^[a-zA-Z]\w{4,15}$/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) => Boolean(val);


const submit = async (row) => {
	try {
		loading.value = true
		await userInfo.login(row)
		showSuccessToast("登录完成")
		proxy.$router.replace(route.query.isBackUrl || "/mine")
	} finally {
		loading.value = false
	}
}
</script>
<template>
	<van-nav-bar title="登录" left-arrow @click-left="onClickLeft" />
	<div class="bg-[#f6f6f6] pt-[20px]">
		<van-form @submit="submit">
			<van-cell-group inset>
				<van-field v-model="params.username" name="username" label="账号" placeholder="请输入账号"
					:rules="[{ pattern, message: '请输入用户名' }]" />
				<van-field v-model="params.password" label="密码" name="password" placeholder="请输入密码"
					:rules="[{ validator: validator, message: '请输入正确密码' }]" />
			</van-cell-group>
			<div style="margin: 16px;">
				<van-button round block type="primary" native-type="submit" :loading="loading">
					提交
				</van-button>
			</div>
		</van-form>
	</div>
</template>

<style scoped lang="scss"></style>
